<template>
	<div class="shop-cart">
		<div class="cart-bg" style="display: none;"></div><!--  -->
		<div class="cart-menu">
			<div class="cart-header">
				<span>满50减2元</span>
				<span v-show="toDiffers">，还差 <span style="color:#FF5339">{{toDiffer()}}</span></span>
				
			</div>
			<div class="cart-content"  v-show="visibilitys">
				<div class="cart-content-header">
					<div class="header-info">已选商品</div>
					<div class="delete-info">清空</div>
				</div>
				<ul class="cart-content-list">
					<li class="list-info"  v-for="item of this.$store.state.newFoods">
						<div class="food-name">{{item.foods_name}}</div>
						<div class="price"><span style="font-size:.24rem">￥</span>{{computeTotal(item.lowest_price,item.count)}}</div>
						<div class="count-cart">
							<div class="reduces" v-show="item.count" >
								<div class="svg-cut"  @click="reduce(item)">
									<svg viewBox="0 0 44 44" width="100%" height="100%"><path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm0 42C11 42 2 33 2 22S11 2 22 2s20 9 20 20-9 20-20 20z" clip-rule="evenodd"></path><path id="cart-maxs" fill-rule="evenodd" d="M32 20c1.1 0 2 .9 2 2s-.9 2-2 2H12c-1.1 0-2-.9-2-2s.9-2 2-2h20z" clip-rule="evenodd"></path></svg>
								</div>
								<div class="count">{{item.count}}</div>
							</div>
							<div class="svg-add"   @click="addCount(item)">
								<svg viewBox="0 0 44 44"  width="100%" height="100%"><path fill="none" d="M0 0h44v44H0z"></path><path id="cart-minus"fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm10 24h-8v8c0 1.1-.9 2-2 2s-2-.9-2-2v-8h-8c-1.1 0-2-.9-2-2s.9-2 2-2h8v-8c0-1.1.9-2 2-2s2 .9 2 2v8h8c1.1 0 2 .9 2 2s-.9 2-2 2z" clip-rule="evenodd"></path>
													</svg>
							</div>
									
						</div>
					</li>
				</ul>
			</div>
			<div class="cart-bottom"  @click="clickDisplay">
				<div class="cart-logo"><div class="logo"><div class="logo-content"></div></div></div>
				<div class="total">￥{{this.$store.state.allTotal}}</div>
				<div class="account">去结算</div>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
import shopControl from '@/common/shopControl'

export default {
	name:'shopCart',
	data(){
		return {
			count:0,
			visibility:false,//用来隐藏购物车参数
			toDiffers:true

		}
	},

	methods: {
		computeTotal(price,count){
			//只要数据变化，会触发methods方法
			return price*count
		},
		toDiffer(){//计算差价
			//这个50可以是配送起步价
			let result=50-this.$store.state.allTotal;
			console.log(typeof result)
			this.toDiffers=result>0?true:false;
			return result
		},
		clickDisplay(){
		//如何总是大于0，购物车可以自由点击
			if(this.$store.state.allCount>0){
				 this.visibility=!this.visibility
			}else{//小于0时，只能隐藏
				this.visibility=false;
			}
			
		},
		addCount(foodName){//event是判断系统事件
			foodName.count++;
			this.$store.state.allCount++;
			this.$store.commit('controlFoods',foodName)

		},

		reduce(foodName){//减少函数
			this.$store.state.allCount--;
			foodName.count--;
			if(this.$store.state.allCount==0){
			this.$store.commit('controlFoods',{})
			}else{
				this.$store.commit('controlFoods',foodName)
			}
		}
	},
	computed:{
		visibilitys(){//当总数大于0且点击购物车栏时，才显示
			if(this.$store.state.allCount>0&&this.visibility){
				return true
			}else{
				return false
			}
		}
	}


}
</script>

<style  scoped lang="stylus">
	.shop-cart
		position:fixed
		bottom 0
		width: 100%;
		.cart-bg
			background #000
			opacity: .4;
			transition: opacity .3s ease;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		.cart-menu
			position: fixed;
			background: #505052;
			z-index: 2;
			bottom: 0;
			left: 0;
			right: 0;
			.cart-header
				height: 0.4rem;
				line-height: .4rem;
				background: #fffad6;
				color #333333
				text-align: center;
				font-size: 0.1rem;
			.cart-content
				corlor #fff
				background #fff
				.cart-content-header
					height .7rem
					background #eceff1
					padding: 0 .35rem;
					line-height .7rem
					color: #666;
					.header-info
						float:left
						font-size:.32rem
					.delete-info
						float:right
				.cart-content-list
					padding: 0 .3rem 0 .35rem;
					.list-info
						display:flex
						border-bottom: 1px solid #eee;
						.food-name
							flex:5
							font-size: .34rem;
							line-height: 1rem;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						.price
							flex 4
							font-size: .34rem;
							font-weight: 700;
							color: #ff5339;
							text-align: right;
							line-height: 1rem;
						.count-cart
							flex 3.5
							padding-top: 5px;
							text-align: right;
							line-height 1rem
						.reduces
							display:inline-block
							height: .4rem;
							line-height: .4rem;
							.svg-cut
								width: 0.4rem;
								display:inline-block
							svg
								fill: #2396ff;
								#cart-maxs
									fill: rgb(35, 149, 255);
							.count
								text-align: center;
								vertical-align: top;
								font-size: 17px;
								color:#333
								width: 0.4rem;
								display:inline-block
						.svg-add
							width: 0.42rem;
							display:inline-block
							#cart-minus
								fill:rgb(35, 149, 255);
			.cart-bottom
				height: 1rem;
				color #fff
				display flex
				line-height 1rem
				padding-left .3rem
				.cart-logo
					flex 1.8
					position relative
					.logo
						position: absolute;
						width: 1rem;
						height: 1rem;
						top -.2rem
						border-radius: 100%;
						box-sizing: border-box;
						padding: .1rem;
						background-color: #505052;
						.logo-content
							background: url('') 50% no-repeat;
							background-size: 0.5rem;
							border-radius: 100%;
							height: 100%;
							width: 100%;
							background-color: #3190e8;
				.total
					flex 6
					font-size .36rem
				.account
					flex 3
					font-size .32rem
					font-weight 700
					text-align: center;
					background-color: #38ca73;
</style>